<template>
	<navBar></navBar>
	<view class="sort_title">
		<view class="sort">
			<!-- <view class="sort_item" v-for="item in sort">
				{{item.name}}
				<uni-icons class="input-uni-icon" type="bottom" size="10" color="#999" />
			</view> -->

			<uni-collapse accordion class="fold" ref="collapse" v-model="value" @change="change">
				<uni-collapse-item class="fold_chied" style="display: float !important;" v-for="item in sort"
					:title="item.name">
					<view class="content">
						{{item.name}}
					</view>
				</uni-collapse-item>
			</uni-collapse>

		</view>
		<view class="label">
			<view class="label_item" v-for="item in labels">
				{{item}}
			</view>

		</view>
	</view>
	<view class="center">
		<view class="vehicle_cent">
			<view class="vehicle_item" v-for="item in vehicles">
				<image class="vehicle_img" :src="item.cover" mode=""></image>
				<view class="center">
					<view class="title">
						<text v-if="item.reportAssess" class="span"> 腾发自营</text>
						<text v-else-if="item.saleType == 2" class="span"> 限时特惠</text>
						<text v-else-if="item.saleType == 1" class="span" style="background-color: #1851ee;">
							限时特惠</text>

						{{item.carName}}
					</view>
					<view class="span">
						<text>{{item.dateOfRegistration }}</text>
						<text> / {{item.mileage}}万公里</text>
					</view>
					<text class="price">{{item.currentPrice}}万</text>
				</view>

			</view>
		</view>
	</view>

</template>

<script setup>
	import navBar from "../../components/navBar.vue";
	import {
		ref,
		reactive
	} from "vue";
	import {
		getList,
		getPrice,
		getModel,
		getBrand300,
		getMoreScreen,
	} from "../../ajax/ajax.js";
	import {
		onLoad,
		onReady,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const sort = reactive([{
			name: "排序",
			data: []
		},
		{
			name: "品牌",
			data: []
		},
		{
			name: "价格",
			data: []
		},
		{
			name: "车型",
			data: []
		},
		{
			name: "更多",
			data: []
		},
	]);
	const labels = reactive(["腾发自营", "车主直营", "限时特惠", "严选好车"]);
	const vehicles = reactive([]);
	const count = ref(1);
	
	onLoad(() => {
		console.log('初始化时执行')
		getApp().globalData.index = 1;
	})

	onReady(() => {
		onGetList()
	})

	const onGetList = () => {
		getList({
			page: count.value
		}).then(res => {
			const date = new Date()
			// console.log("vehicles",res);
			vehicles.push(...res.data.data.content)
			// console.log("vehicles", vehicles);
			vehicles.forEach(item => {
				date.setTime(item.dateOfRegistration)
				const string = date.toLocaleDateString().split("/");
				const dateString = string[0].concat("年").concat(string[1]).concat("月")
				item.dateOfRegistration = dateString
				// console.log("时间戳",item.dateOfRegistration,date.toLocaleDateString());
			})
			// console.log(vehicles);
		});
	}

	onReachBottom(() => {
		console.log("触底了");
		count.value = count.value += 1;
		onGetList()

	})
</script>

<style lang="scss">
	.sort_title {
		width: 750px;
		position: fixed;
		background-color: #fff;
		z-index: 100;

		.sort {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 750rpx;
			height: 70rpx;
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}

		.label {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 750rpx;
			height: 70rpx;
			font-size: 18rpx;
			margin: 10rpx 0;

			.label_item {
				padding: 8rpx 28rpx;
				background-color: #f4f4f4;
				border-radius: 20rpx;
			}
		}
	}

	.center {
		width: 750rpx;
		margin-top: 180rpx;

		.vehicle_cent {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			width: 750rpx;
			// height: 400rpx;

			.vehicle_item {
				width: 350rpx;
				height: 580rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 5rpx;

				.vehicle_img {
					width: 100%;
					height: 50%;
				}

				.center {
					width: 320rpx;
					margin: 0 auto;

					.title {
						font-size: 32rpx;
						font-weight: 600;

						.span {
							font-size: 10rpx;
							font-weight: 400;
							background-color: #ee5e0a;
							color: #fff;
							border-radius: 10rpx;
						}
					}

					.span {
						font-size: 10rpx;
						color: #999;
					}

					.price {
						color: red;
						font-size: 34rpx;
						font-weight: 600;
					}

					.read {
						font-size: 25rpx;
						color: #999;
					}

					.text {
						width: 300rpx;
						font-size: 32rpx;
						color: #606060;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}


			}
		}
	}



	:deep(.uni-collapse) {
		// width: 200rem !important;
		flex-grow: 0;
		flex-direction: column;
		flex: 1;
		overflow: visible !important;
	}

	.fold {
		// position: absolute;
		// top: 0;
		// left: 0;
		// width: 300rpx !important;
		width: 750rpx !important;
		height: 90rpx;
		overflow: visible !important;
		display: flex !important;
		flex-wrap: nowrap;
		justify-content: center;
		margin: 0rpx 0;
	}

	.fold_chied {
		// position: relative;
		width: 750rpx !important;
		display: inline-block !important;
		width: 140rpx !important;
		overflow: visible !important;

		.content {
			flex-wrap: nowrap !important;
			width: 750rpx !important;
			overflow: visible !important;
			z-index: 10000;
			background-color: #aaffff;

		}
	}

	:deep(.uni-collapse-item__wrap-content) {
		flex-wrap: nowrap !important;
		flex-grow: 1 !important;
		width: 750rpx !important;
		height: 400rpx !important;
		position: absolute !important;
		border: 1px solid;
		top: 0rpx;
		left: 0;
		overflow: visible !important;
	}

	.uni-collapse {
		width: 100%;
		display: flex;
		flex-direction: inherit;
		background-color: #fff;
	}

	:deep(.content) {
		padding: 15px;
		overflow: visible !important;
	}

	.text {
		font-size: 14px;
		color: #666;
		line-height: 20px;
		overflow: visible !important;
	}

	.button {
		// margin-top: 10px;
		margin: 10px;
		margin-bottom: 0;
		overflow: visible !important;
	}
</style>